<template>
  <div class="picture-list">
    <!-- 图片列表 -->
    <a-list
      :grid="{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }"
      :data-source="dataList"
      :loading="loading"
    >
      <template #renderItem="{ item: picture }">
        <a-list-item style="padding: 0">
          <!-- 单张图片 -->
          <a-card hoverable @click="doClickPicture(picture)">
            <template #cover>
              <img
                style="height: 180px; object-fit: cover"
                :alt="picture.name"
                :src="picture.thumbnailUrl ?? picture.url"
                loading="lazy"
              />
            </template>
            <a-card-meta :title="picture.name">
              <template #description>
                <a-flex>
                  <a-tag color="green">
                    {{ picture.category ?? '默认' }}
                  </a-tag>
                  <a-tag v-for="tag in picture.tags" :key="tag">
                    {{ tag }}
                  </a-tag>
                </a-flex>
                <div style="position: absolute; top: 8px; right: 8px;">
                  <a-button shape="circle" @click.stop="openShareModal(picture)">
                    <template #icon><ShareAltOutlined /></template>
                  </a-button>
                </div>
              </template>

            </a-card-meta>
          </a-card>
        </a-list-item>
      </template>
    </a-list>
    <ShareModal
      v-model:visible="shareModalVisible"
      :title="currentPicture?.name"
      :link="currentPicture?.url"
    />

  </div>
</template>

<script setup lang="ts">
import { ShareAltOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
import ShareModal from '@/pages/ShareModal.vue'
import { ref } from 'vue'
interface Props {
  dataList?: API.PictureVO[]
  loading?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  dataList: () => [],
  loading: false,
})

// 跳转至图片详情
const router = useRouter()
const doClickPicture = (picture) => {
  router.push({
    path: `/picture/${picture.id}`,
  })
}
const shareModalVisible = ref(false)
const currentPicture = ref<API.PictureVO | null>(null)

const openShareModal = (picture: API.PictureVO) => {
  currentPicture.value = picture
  shareModalVisible.value = true
}

</script>

<style scoped></style>
